<template>
    <div id="_detail">
        <ul>
            <li>题目地址</li>
            <br/>
            <el-button type="primary" round v-if="!isDone" @click="startTest"><i class="el-icon-caret-right"></i>启动环境
            </el-button>
            <a  v-if="isDone">{{ test.url }}</a>
            <countDown id="_countDown" :countDownTime="countDown" v-if="isDone"/>
            <el-button type="primary" round v-if="isDone && !isDelay" @click="delayTest" id="_delayBtn"><i class="el-icon-caret-right"></i>申请延长时间到1小时</el-button>
            <el-button type="info" round v-if="isDone && isDelay" disabled id="_delayBtn"><i class="el-icon-warning-outline"></i>已延长</el-button>
            <el-button type="primary" round v-if="isDone" @click="closeTest" id="_closeBtn"><i class="el-icon-caret-right"></i>结束实验</el-button>
            <br/><br/>
            <li id="_flag">提交Flag</li>
            <div style="margin-top: 15px; width: 500px">
                <el-input placeholder="请输入flag" v-model="userFlag">
                    <template slot="append">  <el-button type="text" style="color: #000; border-color: #fff;" @click="submitFlag()">
                        提交Flag
                    </el-button></template>
                </el-input>
            </div>
            <br/>
            <li>实验手册</li>
            <div>
                {{ test.introduce }}
            </div>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "TestContent",
        components: {
            countDown: () => import('@/components/countDown.vue')
        },
        data() {
            return {
                test: {
                    name: "测试",
                    imgSrc: "",
                    introduce: "一段介绍",
                    usedNumber: 0,
                    rangeType: "sql注入",
                    difficulty: "初级",
                    simpleNote: '',
                    url: '正在生成中',
                },
                isDone: false,
                isDelay: false,
                countDown: 0,
                userFlag: '',
                testId: 0,
            }
        },
        methods: {
            getTime(){
                this.$axios.get('/testDetail/getTime', {
                    params: {
                        testId: this.testId
                    }
                }).then(res => {
                    if (res.data.code === 200) {
                        if (res.data.data.lastTime === 3600) {
                            this.isDone = false;
                            return;
                        }
                        this.test.url = res.data.data.port;
                        this.countDown = res.data.data.lastTime;
                        let seeAnswer = res.data.data.seeAnswer ;
                        sessionStorage.setItem("seeAnswer",seeAnswer)
                        this.isDone = true;

                    }
                })
            },
            initTestInfo() {
                this.$axios.get('/testDetail/getTestDetail', {
                    params: {
                        testId: this.testId
                    }
                }).then(res => {
                    if (res.data.code === 200) {
                        let {
                            testCode,
                            testName,
                            testUrl,
                            flag
                        } = res.data.data;
                        this.testId = testCode;
                        this.test = res.data.data;
                        this.test.url = testUrl;
                        this.test.name = testName;
                        this.oldFlag = flag;
                        this.getTime();
                        this.$axios.get('/testDetail/getIsDelay', {
                            params: {
                                testId: this.testId
                            }
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.isDelay = res.data.data;
                            }
                        })
                    }
                });
            },
            startTest() {
                this.$confirm('请确认是否准备启动环境', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isDone = true;
                    this.countDown = 3600;
                    this.$axios.get('/testDetail/startTest', {
                        params: {
                            testId: this.testId,
                            oldFlag: this.oldFlag
                        }
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: "启动成功",
                                type: 'success'
                            });
                           this.initTestInfo();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消启动'
                    });
                });
            },
            delayTest() {
                this.$confirm('请确认是否申请延长时间(一次实验只能延长一次)', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get('/testDetail/delayTest', {
                        params: {
                            testId: this.testId,
                            oldFlag: this.oldFlag
                        }
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: "延长成功",
                                type: 'success'
                            });
                            this.isDelay = true;
                            this.countDown = 3599;
                            this.initTestInfo();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消延长'
                    });
                });
            },
            submitFlag() {
                if (this.userFlag === "") {
                    this.$message({
                        message: "请输入flag",
                        type: 'warning'
                    });
                    return;
                }
                this.$axios.postForm('/testDetail/submitFlag',{
                    testId:this.testId,
                    flag:this.userFlag
                }).then(res=>{
                    if(res.data.code===200){
                        this.$message({
                            message: res.data.data,
                            type: 'success'
                        });
                        this.isDone = false;
                        this.$emit('updateTestList');
                        return;
                    }
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                })
            },
            closeTest(){
                this.$confirm('请确认是否关闭实验', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.get('/testDetail/closeTest', {
                        params: {
                            testId: this.testId,
                        }
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: "关闭成功",
                                type: 'success'
                            });
                            this.isDone = false;
                            this.$emit('updateTestList');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消关闭'
                    });
                });
            }
        },
        activated() {
            this.testId = sessionStorage.getItem('testId');
            this.initTestInfo();
        },

    }
</script>

<style scoped>
    #_detail {
        width: 815px;
        position: relative;
        top: -100px;
        left: 20px;
        font-size: 20px;
    }
    #_countDown {
        position: absolute;
        top: 62px;
        left: 350px;
        font-size: 20px;
    }
    #_delayBtn{
        position: absolute;
        top: 55px;
        left: 530px;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px;
    }

    li::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background-color: #f00;
    }
    #_closeBtn{
        position: absolute;
        top: 55px;
        left: 720px;
    }
</style>